<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点操作</title>
    <style>
        .base1{
            color: red;

        }
        .base2{
            font-size: 50px;
        }

    </style>
</head>
<body>
<div id="box" class="base1 base2">
    <button id="add">添加文字颜色</button>
    <button id="change">改变文字大小</button>
</div>
<script>
    var p =document.createElement('p')
    //添加标签内容
    p.innerText='hello javascript'

    //获取box这个元素
    document.getElementById("box")
    box.append(p)

    //调制css样式   内联样式
    // box.style.color="orange"
    // box.style.fontSize="130px"

    //通过添加内部样式来实现css设置
    //box.className="base1"
    // box.className.add("base1")
    // box.className.add("base2")
    //如何给元素绑定单击事件 1.获得绑定对象 2，绑定事件类型
    var addBtn=document.getElementById("add")
    addBtn.onclick=function (){
        box.classList.add("base1")
    }
    var changeBtn=document.getElementById("change")
    changeBtn.onclick=function (){
        box.classList.add("base2")
    }

</script>
</body>
</html>